<template>
	<view class="container">
   <loading v-if="loading"></loading>
	 <view v-else>
	 	
	 
		<!-- <view class="bg-view">
			<view class="bg_box">
				<view class="top-nav"
					:style="'height:' + (titleBarHeight+titleBarHeight) + 'px;position:fixed;top:0;width:100vw;'">
					<view class="status_nav"
						:style="'height:' + statusBarHeight + 'px;position:fixed;top:0;width:100vw;'"></view>
					<view class="left-button-box" :style="'height:'+ titleBarHeight +'px;top:'+ statusBarHeight +'px;'"
						@click="tapToBack('back')">
						<image src="../../static/back.png" mode="aspectFill"></image>
					</view>
					<view
						:style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+ statusBarHeight +'px;position:fixed;width:100vw;'"
						class="Index_tab_top">
						<view class="mine-txt"></view>
					</view>
				</view>
				<view :style="'width: 100vw;height:'+(titleBarHeight+titleBarHeight)+'px;'"></view>

			</view>

			<image src="https://imgs.ynz666.com/test/2024/09/29/NzU3MmQxNjFhZDM0YzU3NGZhYWZkZWM5OTlmMTMwNTg=.png"
				mode="widthFix" class="bg-image"></image>
			<view class="title">
				- 本活动最终解释权归下楼科技所有 -
			</view>
		</view> -->
		<view class="topImg">
			<image src="https://imgs.ynz666.com/test/2024/10/12/YTJkNDNhZTc0MmQwNDQ2ZjY0NDdmYmEwYmY5ZGJlYzc=.png"
				mode="widthFix" class="bg-image"></image>
		</view>

		<view class="main1">
			<!-- <image src="https://imgs.ynz666.com/test/2024/09/29/YWJmZWQyNmQzYTdlYTMzMzAzMTBjZTdhODMyMDk4OGY=.png"
				mode="widthFix" class="bg-image"></image> -->
			<view class="main_box">
				<view class="box_title">
					<view class="view1">
						领取成功可立即兑换以下项目  
					</view>
					<view class="view2">
						注：一张券只能兑换以下任意一项  
					</view>
				</view>
				
				<view class="item" v-for="(item,index) in storeList" :key="index" @click="jumpDetil(item.id)">
					<view class="item_left">
						<image :src="item.thumb_img"
							mode="aspectFill" class="img"></image>
						<view class="name">
							{{item.name}}
						</view>
					</view>
					<view class="item_right">
						点击图片可跳转商家处兑换
					</view>
				</view>
				<!-- <view class="clickBox">
					<view class="storeImg" @click="jumpDetil('1826150573347446784')">
						
					</view>
					<view class="storeImgTwo" @click="jumpDetil('1826151083202846720')">
						
					</view>
				</view> -->
			
				
			</view>
		</view>
		
		<view class="main2">
			<image src="https://imgs.ynz666.com/test/2024/11/07/ZWFmZGE3Y2JhMDJhZDViMDZhNTNmMjMwOTllNzIzZWI=.png"
				mode="widthFix" class="img"></image>
		</view>
		
		<view class="foot">
			<view class="btn">
				<view class="btn_box" v-if="!myInfo.status" @click="drawDown">
					<view class="view1">
						立即领取
					</view>
				</view>
				<view class="btn_box btn_boxT" v-if="myInfo.status" @click="dramcon">
					<view class="view1">
						立即分享
					</view>
					<text class="text1">（分享朋友即可获得）</text>
					<button open-type="share" class="btn_sha"></button>
				</view>
				<button v-if="!mineInfo.phone && mineInfo.phone.length!==11" open-type="getPhoneNumber"
					class="btn_pho" @getphonenumber.stop="onGetPhoneNumber"></button>
			</view>
		</view>

	</view>

    
	</view>
</template>


<script>
	var app = getApp();
	import http from '@/utils/request/http.js';
	import env from '@/env/index.js';
	import painter from '@/wxcomponents/painter/painter';
import loading from '../../components/loading/loading.vue';
	import {
		userReceiveCoupon,
		userReceiveCouponStatus,
		recommendBaseList
	} from '../../apis/index.js';

	export default {
		data() {
			return {
				loading: true, //骨架屏
				statusBarHeight: 0,
				titleBarHeight: 0,
				bottomTabbar: 0,
				menuButtonInfo: {},
				mineInfo: {},

				parentUid: '', //链接分享上一级id
				agentId:'',//代理人id

				myInfo: {},
				
				storeList:[],//商家列表

			};
		},
    components:{
    	loading,
    },
		onLoad(options) {
			console.log(options, "options")
			if (options.parentUid) {
				this.parentUid = options.parentUid
			}
			if (options.aId) {
				this.agentId = options.aId
			}
			
			let that = this;
			app.isLogin({}, function(login) {
				console.log(login, "loginlogin")
				that.mineInfo = login;
				if(options.scene){
					console.log('通过链接进')
					let qrSourceId = decodeURIComponent(options.scene).split('=')[1];
					app.QrcodeSource(qrSourceId).then(qrinfo=>{
						console.log(qrinfo,"qrinfo111")
						
						let xuScene = decodeURIComponent(qrinfo.dbScene)
						console.log(xuScene,"xuScene1111")
						
					
						let xuData = {}
						let xuParams = xuScene.split('&')
						for (var i in xuParams) {
							var val = xuParams[i].split('=');
							val.length > 0 && val[0] && (xuData[val[0]] = val[1] || null)
						}
						console.log(xuData,"xuData9999")
						
						that.agentId = xuData.aId;
						
						// if(xuData.groupUser){ //分享人的ID
						// 	// 为分享海报给好友看到的页面
						// 	that.groupUser=xuData.groupUser
						// }
						
						that.getShareInvitePageInfo();
						that.getRecommendBaseList();
						
					})
				}else{
					that.getShareInvitePageInfo();
					that.getRecommendBaseList();
				}
				
			})
		},
		onReady() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 + uni
				.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		},
		onShow() {
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			// let that = this
			// that.LoginInvite();

		},
		onShareAppMessage(res) {
			if (res.from = 'button') {
				return {
					title: '老板请客，送你一张免单券',
					imageUrl: '',
					path: `/pageE/sharedraw/sharedraw?parentUid=${this.mineInfo.id}&aId=${this.agentId}`
				}
			}
			// https://imgs.ynz666.com/test/2023/06/29/NTRmMWFkMzRhNGY2YTcyNGVlMWQ0MTAwNWRmMjNkMTU=.png
		},
		methods: {
			getRecommendBaseList(){
				let data={
					page:1,
					page_size:20,
				}
				recommendBaseList(data).then(res=>{
					this.storeList=res.data.data.data
				})
			},
			jumpDetil(id){
				let that = this;
				console.log(id,"1111")
				uni.navigateTo({
					url: `/pages/storeDetail/storeDetail?store_id=${id}`
				});
			},
			jumpPage() {
				uni.navigateTo({
					url: `/pageC/shareList/shareList`
				});
			},
			getShareInvitePageInfo() {
				userReceiveCouponStatus().then(res => {
					this.myInfo = res.data
					this.loading=false
				})
			},
			LoginInvite(login) {
				let that = this;
				let inviteId = null;
				app.isLogin({
					id: inviteId
				}, function(res) {
					that.mineInfo = res;
					that.getShareInvitePageInfo();
					console.log(that.mineInfo, "that.mineInfo")
				});
			},
			// 手机号授权
			onGetPhoneNumber(e) {
				let that = this;
				app.GetMobile(e, function(e) {
					app.getUserInfo(function(lRes) {
						that.mineInfo = lRes;
						that.drawDown();
					})
				});
			},
			// 立即领取
			drawDown() {
				let data = {
					uid: this.parentUid,// 分享者的id
					agentId: this.agentId,// 代理人ID
				}
				console.log(data,"data立即领取")
				userReceiveCoupon(data).then(res => {
					console.log(res, "res")
					if (res.code == 200) {
						uni.showToast({
							title: '你已领取成功',
							icon: "none",
							duration:3000
						})
						this.myInfo.status = true
					}
				})
			},
			dramcon(){
				let data = {
					uid: this.parentUid,// 分享者的id
					agentId: this.agentId,// 代理人ID
				}
				console.log(data,"data立即领取")
			},
			// 返回按钮
			tapToBack(page) {
				switch (page) {
					case 'index':
						uni.switchTab({
							url: '/pages/index/index'
						})
						break;
					case 'back':
						console.log(111)
						uni.navigateBack({
							delta: 1,
							fail() {
								console.log(222)
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})
						break;
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FF436E;
	}

	.container {
		
	}

	.left-button-box {
		display: flex;
		align-items: center;
		position: absolute;
		left: 30rpx;
		z-index: 7;

		.line {
			height: 30rpx;
			background: #CCCCCC;
			width: 1rpx;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			margin: 0 20rpx;
		}
	}

	.top-nav {
		position: relative;
		z-index: 5;
	}

	.title_one {
		margin: 0 20rpx;
		padding-top: 40rpx;

		.title_top {
			margin: 0 25rpx;

			.view1 {
				font-size: 40rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				text-shadow: 1rpx 3rpx 4rpx #E33C03;
			}

			.view2 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				opacity: 0.8;
				margin-top: 4rpx;
			}
		}
	}

	/* 背景 */
	.bg-view {
		width: 100vw;
		height: 1100rpx;
		position: relative;

		.bg_box {
			height: 1100rpx;
		}

		.bg-image {
			z-index: -1;
			display: block;
			width: 100%;
			height: 1100rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.title {
			position: absolute;
			bottom: 30rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			width: 100%;
			opacity: 0.7;
		}
	}

	.status_nav {
		width: 100vw;
	}

	.Index_tab_top {
		font-size: 38rpx;
		font-weight: 500;
		color: #141414;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 5;

		.scan-box {
			margin-left: 30rpx;
			width: 160rpx;
			height: 58rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 28rpx;
			border: 1rpx solid #FA6400;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
		}

		.mine-txt {
			color: #fff;
			font-size: 32rpx;
		}
	}

	.share-mission {
		background-color: #fff;
		padding: 20rpx 20rpx 115rpx 20rpx;
	}

	.share-mission-title {
		margin: 20rpx 0;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;

		view:nth-child(2) {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}
	}

	.share-mission-list {
		padding: 20rpx 0;
	}

	.share-mission-item {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.mission-left {
			display: flex;
			align-items: center;
		}

		.share-no {
			width: 46rpx;
			height: 46rpx;
			line-height: 46rpx;
			border-radius: 50%;
			background: #FF4D4F;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			margin-right: 20rpx;
		}

		.share-content {
			view:nth-child(1) {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
				margin-bottom: 4rpx;
			}

			view:nth-child(2) {
				font-size: 22rpx;
				color: #666666;
				line-height: 30rpx;
			}
		}

		.share-btn {
			width: 100rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 24rpx;
			border: 1rpx solid #FF4D4F;
			font-size: 22rpx;
			font-weight: bold;
			color: #FF4D4F;
			text-align: center;
		}

		.button-re {
			position: relative;

			button {
				width: 100rpx;
				height: 48rpx;
				border-radius: 24rpx;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				border: 1rpx solid red;
			}
		}
	}

	.share-progress {
		width: 1rpx;
		height: 50rpx;
		background-color: #efefef;
		margin-left: 24rpx;
	}




	// ////////////
	.topImg{
		width: 100%;
		display: flex;
		.bg-image{
			width: 100%;
		}
	}

	.main1 {
		// margin-top: -20rpx;
		// border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		padding-bottom: 20rpx;
		// .bg-image{
		// 	width: 100%;
		// }

		.main_box {
			margin: -363rpx 41rpx 0;
			background: #fff;
			border-radius: 30rpx;
			position: relative;
			padding-bottom: 40rpx;
			.box_title{
				padding: 57rpx 0 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.view1{
					font-size: 38rpx;
					color: #000000;
					font-weight: bold;
				}
				.view2{
					font-size: 24rpx;
					color: #000000;
					padding-top: 30rpx;
				}
			}
			.item{
				margin: 0 32rpx;
				border-top: 1rpx dashed #7688B5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0;
				.item_left{
					width: 504rpx;
					height: 387rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.img{
						width: 504rpx;
						height: 289rpx;
						border-radius: 20rpx;
					}
					.name{
						font-weight: bold;
						font-size: 34rpx;
						color: #000000;
						padding-top: 30rpx;
					}
				}
				.item_right{
					font-size: 28rpx;
					color: #DD382A;
					width: 58rpx;
					height: 387rpx;
					background: #FFECEB;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					writing-mode: vertical-lr;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			
			
			.clickBox{
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.storeImg{
				width: 500rpx;
				height: 300rpx;
				background: pink;
				margin-top: 37rpx;
				opacity: 0;
			}
			.storeImgTwo{
				width: 500rpx;
				height: 300rpx;
				background: pink;
				margin-top: 50rpx;
				opacity: 0;
			}

		}
	}
	
	.main2{
		width: 100%;
		padding-bottom: 300rpx;
		.img{
			width: 100%;
		}
	}

	.foot {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// margin-top: 32rpx;
		// padding-bottom: 52rpx;
		position: fixed;
		bottom: 100rpx;

		.btn {
			width: 665rpx;
			height: 124rpx;
			font-size: 48rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #F43B00;
			position: relative;

			.btn_box {
				width: 665rpx;
				height: 124rpx;
				// background: linear-gradient(180deg, #FCDF8D 0%, #FC952C 100%);
				background: linear-gradient(#FEF1E7 0%, #F9CB9D 100%);
				border-radius: 60rpx;
				// border: 2rpx solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.view1 {
					color: #b16646;
				}

				.text1 {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.btn_sha {
					width: 665rpx;
					height: 124rpx;
					border-radius: 28rpx 0px 0px 28rpx;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
					border: 1rpx solid red;
				}
			}
			.btn_boxT{
				background: #eaa5a1;
				.view1 {
					color: #fff;
				}
			}
		}

		.btn_pho {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}

		.text {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 16rpx;
			text-decoration: underline;
		}
	}
</style>
